<template>
  <view class="ver-layout">
    <!--  标题返回栏  -->
    <view class="back-title-layout hor-layout-center" :style="{opacity: titleOpacity}">
      <view class="back-view" @click="navBack">
        <text class="iconfont back-icon">&#xe8de;</text>
      </view>
      <view class="title-text">打卡记录</view>
    </view>
    <!--  头部信息栏  -->
    <view class="top-layout" :style="getTopStyle">
      <view class="title-layout hor-layout-center">
        <view class="back-view" @click="navBack">
          <i class="iconfont back-icon">&#xe8de;</i>
        </view>
        <view class="title-text">打卡记录</view>
      </view>
      <view class="top-content hor-layout">
        <image class="teacher-icon" :src="teacherObj.avatarurl?teacherObj.avatarurl:ic_teacher_man_default"/>
        <view class="content-info ver-layout">
          <view class="info-name">{{ teacherObj.name }}</view>
          <view class="company-info hor-layout-side">
            <view>{{ teacherInfo.teacher_org }}</view>
            <view class="num">{{ teacherInfo.student_total }}</view>
          </view>
          <view class="infos-info hor-layout-side">
            <view>{{ getTeacherText }}</view>
            <view>学生</view>
          </view>
        </view>
      </view>
    </view>
    <!--  打卡统计  -->
    <view class="clock-in-box ver-layout-center">
      <!--      <view>您已连签到10天，请继续加油哦!</view>-->
      <view class="box-content hor-layout-center">
        <view class="box-item ver-layout-center">
          <view class="content-num">{{ teacherInfo.sign_abnormal }}</view>
          <view class="content-text">签到异常</view>
        </view>
        <view class="box-divider-line"></view>
        <view class="box-item ver-layout-center">
          <view class="content-num">{{ teacherInfo.sign_total }}</view>
          <view class="content-text">签到天数</view>
        </view>
      </view>
    </view>
    <!-- 打卡日历 -->
    <view class="clock-in-calendar ver-layout-center">
      <view class="calender-title hor-layout-center">
        <u-icon name="play-left-fill" color="#333333" size="25" @click="getSideDate(-1)"></u-icon>
        <span class="calender-title-text">{{ dateObj.monthStr }}</span>
        <u-icon name="play-right-fill" color="#333333" size="25" @click="getSideDate(1)"></u-icon>
      </view>
      <view class="calender-line"></view>
      <view class="week-index-list hor-layout">
        <view class="week-index-title" v-for="(item,index) in weekIndex" :key="index">
          {{ item }}
        </view>
      </view>
      <view class="week-day-list flex-grid-layout">
        <view class="week-day-item ver-layout-center-all" :class="{'disabled':!item.show}"
              v-for="(item,index) in dateObj.weekDays" :key="index">
          <view :class="{'current':isCurrentDay(item),'sign-success':getSignData(item),
              'sign-fail':getSignData(item,0),'show-detail':isShowDetail(item)}" @click="showSignDetail(item)">
            {{ item.num }}
          </view>
        </view>
      </view>
    </view>
    <!--  打卡详情  -->
    <view v-if="getSignObj.time" class="clock-in-calendar hor-layout" style="margin-bottom: 20px">
      <view class="hint-line ver-layout-center">
        <view class="hint-point"></view>
        <view class="hint-line-view"></view>
        <view class="hint-point"></view>
      </view>
      <view class="clock-in-info ver-layout">
        <view class="info-title">{{ getSignObj.text }}
          <span class="info-title-time" :class="{'late':getSignObj.late}">({{ getSignObj.time }})</span>
        </view>
        <view class="hor-layout info-item">
          <u-icon name="clock-fill" color="#666666"></u-icon>
          <view class="info-item-text">{{ getSignObj.time }}</view>
        </view>
        <view class="hor-layout info-item">
          <u-icon name="map-fill" color="#666666"></u-icon>
          <view class="info-item-text">呼和浩特市赛罕区五三0三工厂内蒙古晨报社</view>
        </view>
        <view class="hor-layout info-item">
          <u-icon name="map-fill" :color="getSignObj.late?'#F72323':'#666666'"></u-icon>
          <view class="info-item-text">{{ getSignObj.status }}</view>
        </view>
        <view class="info-title" style="margin-top: 18px">{{ signDetailObj.after_work }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import {formatDate, monthDays} from "@/common/common.js"
import {TeacherDetailApi} from "@/api/teacherManage.js"

let ic_user_top_bg = require("@/static/home/ic_user_top_bg.png")
let ic_teacher_man_default = require("@/static/home/ic_teacher_man_default.png")
let engine = new TeacherDetailApi()
export default {
  name: "clockIn",
  data() {
    return {
      ic_teacher_man_default,
      teacherObj: {},
      teacherInfo: {},
      titleOpacity: 0,
      weekIndex: ['一', '二', '三', '四', '五', '六', '日'],
      dateObj: {
        dayStr: '',
        curDate: '',
        currentDateStr: '',
        monthStr: '',
        weekDays: [],
      },
      signDetailObj: {},
      detailDateStr: '',
      signList: [],
    }
  },
  computed: {
    getTopStyle() {
      return {backgroundImage: `url(${ic_user_top_bg})`}
    },
    getTeacherText() {
      //教师性别，1男2女
      let {teacher_major, teacher_sex, teacher_age, teacher_phone} = this.teacherInfo
      return `${teacher_major}，${teacher_sex === 1 ? '男' : '女'}，${teacher_age}岁，${teacher_phone}`;
    },
    getSignObj() {
      // todo 位置转换
      let {go_work} = this.signDetailObj, {status, time} = go_work || {},
          text = status === '正常' ? '上班打卡' : '迟到打卡', late = status === '迟到'
      return {text, time, late, status}
    }
  },
  onLoad(options) {
    this.teacherObj = options
    this.getSideDate()
  },
  onPageScroll(e) {
    // console.log("onPageScroll", e)
    this.titleOpacity = e.scrollTop * 0.005
  },
  methods: {
    getClockInInfo() {
      let teacher_id = this.teacherObj.id
      let start_time = this.dateObj.dayStr.substr(0, 7)
      engine.getClockInInfo({teacher_id, start_time}).then(res => {
        this.signList = res.signs
        this.teacherInfo = res.teacher
      })
    },
    navBack() {
      this.$u.route({type: 'back'})
    },
    isCurrentDay(dayObj) {
      return dayObj.fullDate === this.dateObj.currentDateStr
    },
    isShowDetail(dayObj) {
      return dayObj.fullDate === this.detailDateStr
    },
    getSignData(dayObj, status = 1) {
      let {fullDate} = dayObj
      if (fullDate && fullDate.length === 9) fullDate = `${fullDate.substr(0, 7)}-0${fullDate.substr(8, fullDate.length)}`
      let signObj = this.signList.find(sign => (sign.sign_time === fullDate && sign.status === status))
      return signObj
    },
    showSignDetail(dayObj) {
      let signObj = this.getSignData(dayObj) || this.getSignData(dayObj, 0)
      if (signObj) this.detailDateStr = dayObj.fullDate,
          this.signDetailObj = signObj
    },
    getSideDate(t = 0) {
      let {curDate, monthStr, dayStr, weekDays} = this.dateObj,
          currentDateStr = formatDate(new Date(), 'yyyy-MM-d')
      if (!curDate) curDate = new Date()
      curDate.setMonth(curDate.getMonth() + t)
      curDate.setDate(1)
      monthStr = formatDate(curDate, 'yyyy/MM')
      dayStr = formatDate(curDate, 'yyyy-MM-dd')
      weekDays = monthDays.getFullChunkDates(dayStr)
      this.dateObj = {curDate, monthStr, dayStr, weekDays, currentDateStr}
      this.signDetailObj = {}
      this.getClockInInfo()
    }
  }
}
</script>

<style>
page {
  background: #EFEFEF;
}

.back-title-layout {
  z-index: 1000;
  position: fixed;
  width: 100%;
  padding-top: var(--status-bar-height);
  height: calc(var(--status-bar-height) + 44px);
  background: #666D7A;
}

.top-layout {
  position: absolute;
  width: 100%;
  padding-top: var(--status-bar-height);
  height: calc(var(--status-bar-height) + 195px);
  background-size: 100% 100%;
}

.title-layout {
  width: 100%;
  height: 44px;
}

.back-view {
  padding-left: 9px;
  padding-right: 9px;
}

.back-icon {
  color: white;
  font-size: 22px;
}

.title-text {
  width: 100%;
  margin-right: 44px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: white;
}

.top-content {
  margin-left: 20px;
  margin-right: 24px;
  margin-top: 13px;
}

.teacher-icon {
  width: 53px;
  height: 53px;
  flex-shrink: 0;
  border-radius: 50%;
}

.content-info {
  width: 100%;
  margin-left: 9px;
  color: white;
}

.info-name {
  font-size: 16px;
  line-height: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #F3F3F3;
}

.company-info {
  margin-top: 9px;
  font-size: 12px;
  line-height: 12px;
  font-family: Source Han Sans CN;
  color: #F3F3F3;
}

.company-info > .num {
  font-size: 18px;
}

.infos-info {
  margin-top: 11px;
  font-size: 12px;
  line-height: 12px;
  font-family: Source Han Sans CN;
  color: #F3F3F3;
}

.clock-in-box {
  z-index: 100;
  padding-top: 18px;
  padding-bottom: 18px;
  width: calc(100% - 24px);
  margin: 0px 12px;
  margin-top: calc(150px + var(--status-bar-height));
  background: #FFFFFF;
  border-radius: 12px;
}

.box-content {
  width: 100%;
  margin-top: 15px;
}

.box-item {
  flex: 1;
}

.box-divider-line {
  width: 2px;
  height: 67px;
  background: #EFEFEF;
}

.content-num {
  font-size: 25px;
  line-height: 25px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #333333;
}

.content-text {
  margin-top: 15px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
}

.clock-in-calendar {
  width: calc(100% - 24px);
  margin: 0px 12px;
  margin-top: 20px;
  padding: 18px 15px;
  background: #FFFFFF;
  border-radius: 12px;
}

.calender-title {
  font-size: 21px;
  line-height: 21px;
  font-family: Source Han Sans CN;
  color: #010101;
}

.calender-title-text {
  margin: 0px 42px;
}

.calender-line {
  margin-top: 15px;
  width: 284px;
  height: 3px;
  border-radius: 3px;
  background: lightgray;
}

.week-index-list {
  margin-top: 17px;
  width: 100%;
}

.week-index-title {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #8A857C;
}

.week-day-list {
  width: 100%;
  margin-top: 10px;
}

.week-day-item {
  height: 40px;
  line-height: 40px;
  width: calc(100% / 7);
  text-align: center;
  font-size: 16px;
  color: #292621;
  font-family: Source Han Sans CN;
}

.week-day-item.disabled {
  color: #999999;
}

.week-day-item > * {
  position: relative;
  width: 27px;
  height: 27px;
  line-height: 27px;
}

.week-day-item > .current {
  border-radius: 5px;
  background: #4cd964;
}

.week-day-item > .sign-success {
  color: white;
  background-size: 100% 100%;
  background-image: url("../../../static/home/ic_clock_in_signed.png");
}

.sign-fail::before {
  /*小圆点在这里 */
  content: '';
  display: inline-block;
  position: absolute;
  left: calc(50% - 2px);
  bottom: -2px;
  /*此句为css样式展示重点🏁 */
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #F41C1C;
}

.sign-fail.show-detail::before {
  width: 7px;
  height: 7px;
}

.week-day-item > .show-detail {
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 18px;
  font-weight: bold;
}

.clock-in-info {
  margin-left: 11px;
}

.hint-line {
  padding: 5px 0px;
}

.hint-point {
  width: 8px;
  height: 8px;
  border: 1px solid #F67562;
  border-radius: 50%;
}

.hint-line-view {
  flex: 1;
  width: 1px;
  background: #CCCCCC;
}

.info-title {
  font-size: 15px;
  line-height: 15px;
  font-family: SourceHanSansSC;
  font-weight: bold;
  color: #333333;
}

.info-title-time {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 400;
}

.info-title-time.late {
  color: #F72323;
}

.info-item {
  margin-top: 12px;
}

.info-item-text {
  margin-left: 11px;
  font-size: 13px;
  font-family: SourceHanSansSC;
  color: #666666;
}
</style>
